<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <style>
        .img-div {
            width: 940px;
            height: 423px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }

        .img-div .img1 {
            position: absolute;
            top: 0;
            left: 0;
        }

        .img-div .img2 {
            position: absolute;
            top: 0;
            left: 940px;
        }

        .left,
        .right {
            float: left;
            padding: 20% 5px;
            font-size: 3em;
            color: white;
            background: rgba(0, 0, 0, 0.2);
            position: relative;
            cursor: pointer;
        }

        .right {
            float: right;
        }
        .circle {
            /*padding: 0;*/
            position: absolute;
            left:50%;
            top:90%;
            margin-left:-50px;
        }
        .circle li{
            display: inline;
            /*float:left;*/
            color:white;
            cursor: pointer;
        }
        

    </style>
</head>

<body>
    <div class="img-div">

        <img class="img1" src="../images/img1.jpg" style="left:0" />
        <img class="img2" src="../images/img2.jpg" style="left:940px" />
        <div class="left"><</div>
        <div class="right">></div>
        <ul class="circle">
            <li data-index="0" style="color:red">●</li>
            <li data-index="1">●</li>
            <li data-index="2">●</li>
            <li data-index="3">●</li>
        </ul>
    </div>
        <script src="../js/jquery-1.12.4.min.js"></script>
        <script>
            (function() {
                let index = 0;
                let intervalId;
                let leftTimeId;
                let rightTimeId;
                let circleTimeId;
                let ary = [
                    "../images/img1.jpg",
                    "../images/img2.jpg",
                    "../images/img3.jpg",
                    "../images/img4.jpg"
                ];
                let startAnimate = function() {
                    intervalId = setInterval(function() {
                        moveImage($("div.img-div img"));
                    }, 5000);
                }
                $(".left").click(function(){
                    clearInterval(intervalId);
                    clearTimeout(leftTimeId);
                    leftTimeId = setTimeout(function(){
                        moveImage($("div.img-div img"),1);
                        startAnimate();
                    },500)
                    
                    
                });
                $(".right").click(function(){
                    clearInterval(intervalId);
                    clearTimeout(rightTimeId);
                    rightTimeId = setTimeout(function(){
                        moveImage($("div.img-div img"),-1);
                        startAnimate();
                    },500)
                    
                    
                });
                $(".circle li").click(function(){
                    let nextIndex = $(this).attr("data-index");
                    nextIndex--;
                    if(nextIndex < 0){
                        nextIndex = ary.length;
                    }
                    index = nextIndex;
                    clearInterval(intervalId);
                    clearTimeout(circleTimeId);
                    circleTimeId = setTimeout(function(){
                        moveImage($("div.img-div img"),1);
                        startAnimate();
                    },500)

                });
                let moveImage = function($imgs,direct = 1) {
                    $imgs.each(function(){
                        $(this).stop(true);
                        if($(this).position().left == 0){
                           $(this).animate({
                               left:-940 * direct
                           },500);

                        }else{
                            if(direct > 0){
                                index++;
                                if(index >= ary.length ){
                                   index = 0;
                                }
                            }else{
                                index--;
                                if(index < 0){
                                    index = ary.length - 1;
                                }
                            }

                            
                            $(this).css("left",940 * direct);
                            $(this).attr("src",ary[index]);
                            $(this).animate({
                                left:0
                            },500,function(){
                                $(".circle li").css("color","");
                                $(".circle li").eq(index).css("color","red");
                            });
                        }
                    });
                }
             startAnimate();
            })()

        </script>
</body>

</html>
